<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-select
        v-model="searchMap.where.openType"
        class="filter-item"
        placeholder="开放类型"
        clearable
      >
        <el-option
          v-for="item in openTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-date-picker
        v-model="searchMap.where.startTime"
        class="filter-item"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="考试开始时间"
      />

      <el-date-picker
        v-model="searchMap.where.endTime"
        class="filter-item"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="考试结束时间"
      />

      <el-input
        v-model="searchMap.where.title"
        placeholder="搜索考试名称"
        style="width: 200px"
        class="filter-item"
      />
      <el-button type="primary" @click="search()">查询</el-button>
      <el-button type="primary" @click="goExamAdd()">添加考试</el-button>
    </el-form>

    <el-table :data="examList" stripe style="width: 100%" ref="repotable">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="title" label="考试名称" width="200">
      </el-table-column>
      <el-table-column prop="openType" label="考试类型">
        <template slot-scope="scope">
          <div>{{ scope.row.openType }}</div>
        </template>
      </el-table-column>
      <el-table-column label="时间限制" width="300">
        <template slot-scope="scope">
          <div>
            {{
              scope.row.timeLimit == 0
                ? "不限制"
                : scope.row.startTime + "~" + scope.row.endTime
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="totalScore" label="考试总分"> </el-table-column>
      <el-table-column prop="qualifyScore" label="及格线"> </el-table-column>
      <el-table-column prop="qualifyScore" label="考试状态">
        <template slot-scope="scope">
          <div>{{ scope.row.state }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <div slot-scope="scope">
          <el-button
            @click="del(scope.row.id)"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
          <el-button
            @click="edit(scope.row.id)"
            size="small"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
        </div>
      </el-table-column>
    </el-table>
    <br /><br />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.now"
      :page-sizes="[3, 5, 50, 100]"
      :page-size="searchMap.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
  
  <script>
import { list, add, del, delBat } from "@/api/exam";
export default {
  data() {
    return {
      openTypes: [
        {
          value: 1,
          label: "完全开放",
        },
        {
          value: 2,
          label: "部门开放",
        },
        {
          value: 3,
          label: "指定人员开放",
        },
      ],
      searchMap: {
        now: 1,
        size: 5,
        where: {
          title: "",
        },
      },
      examList: [],
      total: 0,
      dialogFormVisible: false,
      repoForm: {
        title: "",
        remark: "",
      },
      editId: null,
    };
  },
  methods: {
    search() {
      list(this.searchMap).then((res) => {
        this.examList = res.list;
        this.total = res.total;
        this.examList.forEach((item) => {
          if (item.openType == 1) {
            // console.log("1111111111");
            item.openType = "完全公开";
          }
          if (item.openType == 2) {
            item.openType = "部门开放";
          }
          if (item.openType == 3) {
            item.openType = "指定人员开放";
          }
        });
      });
    },
    save() {
      this.$router.push({ path: "/exam/add" });
    },
    edit(examId) {
      this.$router.push({ path: "/exam/add", query: { id: examId } });
    },

    del(examId) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(examId).then((res) => {
            if (res.code == 0) {
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
              });
            } else {
              this.$notify({
                title: "失败",
                message: res.msg,
                type: "error",
              });
            }

            //刷新表格
            this.search();
          });
        })
        .catch((err) => console.log(err));
    },

    delBatch() {
      //获取ids
      var ids = [];
      this.$refs.repotable.selection.forEach((item) => {
        ids.push(item.id);
      });
      //交互
      delBat(ids).then((res) => {
        if (res.code == 0) {
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
          });
        } else {
          this.$notify({
            title: "失败",
            message: res.msg,
            type: "error",
          });
        }
      });
      this.search();
    },

    handleSizeChange(size) {
      //pageSize 改变时会触发
      this.searchMap.size = size;
      this.search();
    },

    handleCurrentChange(page) {
      //currentPage 改变时会触发
      this.searchMap.now = page;
      this.search();
    },

    goExamAdd() {
      this.$router.push({ name: "examadd" });
    },
  },
  created() {
    this.search();
  },
};
</script>